<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="zh-CN">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="zh-CN">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content="文章，小清新，听说，tinshow"/>
    <meta name="description" content=""/>
    <meta name="author" content="Javin, www.jiawin.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>
        文章-听心忆 | 听说 </title>
    <!--[if lt IE 9]>
    <script src="${request.contextPath!}/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <link rel='dns-prefetch' href='//dn-staticfile.qbox.me'/>
    <link rel='dns-prefetch' href='//www.jiawin.com'/>
    <link rel='dns-prefetch' href='//s.w.org'/>
    <link rel='stylesheet' id='javin-font-css'
          href='//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css?ver=1463202082' type='text/css' media='all'/>
    <link rel='stylesheet' id='javin-style-css' href='${request.contextPath!}/css/style.css?ver=1463202082'
          type='text/css' media='all'/>
</head>
<body>
<header id="header" class="inside">
<#include "/blocks/header.ftl"/>
</header>
<div id="container" class="container">
    <div class="content category">
        <div id="guide">
            <div class="group">
                <ul>
                    <li class="column">
                        <a class="current">
                            <i class="fa fa-bookmark"></i>
                            不限类别 <i class="fa fa-caret-down arrow"></i>
                        </a>
                        <ul class="sub">
                            <li><a href="#">前端开发</a></li>
                            <li><a href="#">视觉设计</a></li>
                            <li><a href="#">用户研究</a></li>
                            <li><a href="#">交互设计</a></li>
                        </ul>
                    </li>
                    <li class="sort">
                        <a class="current"><i class="fa fa-sort"></i>最新发布<i class="fa fa-caret-down arrow"></i></a>
                        <ul class="sub">
                            <li><a href="#">喜欢最多</a></li>
                            <li><a href="#">浏览最多</a></li>
                            <li><a href="#">评论最多</a></li>
                        </ul>
                    </li>
                    <li class="timeframe">
                        <a class="current"><i class="fa fa-clock-o"></i>不限时间<i class="fa fa-caret-down arrow"></i></a>
                        <ul class="sub">
                            <li><a href="#">一周内</a></li>
                            <li><a href="#">一月内</a></li>
                            <li><a href="#">一年内</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="primary" class="primary list">
            <div class="article" role="main">
                <ul>
                <#list article_list as article>
                    <li id="post-15604" class="group">
                        <div class="item">
                            <div class="thumb">
                                <a target="_blank" href="https://www.tinshow.com/article/detail/${article.articelId!}"
                                   title="${article.title!}">
                                    <img width="210" height="135" alt="${article.title!}" src="${article.mainImageUrl!}"
                                         srcset="${article.mainImageUrl!}"> </a>
                            </div>
                            <div class="item-main">
                                <div class="title"><h2><a target="_blank"
                                                          href="https://www.tinshow.com/article/detail/${article.articelId!}"
                                                          rel="bookmark" title="${article.title!}">${article.title!}</a>
                                </h2></div>
                                <div class="meta">
                                    <div class="cat">
                                        <a href="#" rel="category tag">交互设计</a> <span class="tag-links">
              <i><a href="#" rel="tag">二维</a> - <a href="#" rel="tag">动画</a> - <a href="#" rel="tag">教程</a></i>              </span>
                                    </div>
                                    <div class="excerpt">${article.content!}</div>
                                    <div>
                                        <time class="time">
                                            <i class="fa fa-calendar"></i> ${article.user.displayName!} 发布于
                                            2017-04-08
                                        </time>
                                        <span class="heart-num"><i class="fa fa-heart"></i>1</span><span><i
                                            class="fa fa-fire"></i>828</span>
                                        <span class="comment-num">
             			 <a href="#" class="comments-link"><i class="fa fa-comment"></i>0</a>                          </span>
                                    </div>
                                    <div class="author"><a target="_blank"
                                                           href="https://www.tinshow.com/user/${article.user.userId!}"
                                                           title=" ${article.user.displayName!} 的主页" rel="author">
                                        <img src="${article.user.profileImage!}" class="avatar"
                                             alt="${article.user.displayName!}"" width="40" height="40" />
                                    </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </#list>
                </ul>
            </div>
            <div id="sidebar" class="sidebar-container" role="complementary">
                <div class="sidebar-inner">
                    <aside id="hot-posts" class="widget hot-posts">
                        <h3 class="widget-title"><i class="fa fa-file-archive-o"></i>30天热门</h3>
                        <ul>
                        </ul>
                    </aside>
                    <aside class="widget sidabar-recommend">
                        <div class="box">
                            <div style="height:250px">
                                <!-- 分类-文章 -->
                                <ins class="adsbygoogle"
                                     style="display:inline-block;width:300px;height:250px"
                                     data-ad-client="ca-pub-0976805120227588"
                                     data-ad-slot="3657957811"></ins>
                                <script>
                                    (adsbygoogle = window.adsbygoogle || []).push({});
                                </script>
                            </div>
                        </div>
                    </aside>
                    <aside id="new-comments" class="widget new-comments">
                        <h3 class="widget-title"><i class="fa fa-comments-o"></i>最新评论</h3>
                    <#--<ul>-->

                    <#--<li><a href="http://www.jiawin.com/responsive-multi-level-menu#comment-89524" title="响应式多级菜单 的评论"><div class="thumb"><img src="http://qzapp.qlogo.cn/qzapp/101148295/55ED01799B055F7A65B45D35D8A26B25/100" class="avatar"alt="Z+"" width="50" height="50" /></div><p><strong>Z+</strong><span>这个设计确实不错，不知道有没有pc端的效果啊 www.ami</span></p></a></li>-->
                    <#--<li><a href="http://www.jiawin.com/swiper-mobile-touch-slider-js#comment-89523" title="Swiper-slider 具有硬件加速的移动端触摸滑块插件 的评论"><div class="thumb"><img src="http://static.jiawin.com/uploads/avatar/2017/04/1310544473daaed36f413d5-80x80.jpg" class="avatar"alt="微风"" width="50" height="50" /></div><p><strong>微风™</strong><span>请问 07-centered.html  第7款DEMO，增</span></p></a></li>-->
                    <#--<li><a href="http://www.jiawin.com/2017-front-end-development-trend#comment-89522" title="2017年大前端发展趋势 的评论"><div class="thumb"><img src="http://qzapp.qlogo.cn/qzapp/101148295/F334616A15449A31C49FEB3BA7EC130D/100" class="avatar"alt="尾数520"" width="50" height="50" /></div><p><strong>尾数520</strong><span>666</span></p></a></li>-->
                    <#--<li><a href="http://www.jiawin.com/swiper-mobile-touch-slider-js#comment-89521" title="Swiper-slider 具有硬件加速的移动端触摸滑块插件 的评论"><div class="thumb"><img src="http://static.jiawin.com/uploads/avatar/2015/03/30213535cd2349c43bc9d2a-80x80.jpg" class="avatar"alt="若水"" width="50" height="50" /></div><p><strong>若水</strong><span>下载附件，或者到官方网站下载就可以</span></p></a></li>-->
                    <#--<li><a href="http://www.jiawin.com/swiper-mobile-touch-slider-js#comment-89520" title="Swiper-slider 具有硬件加速的移动端触摸滑块插件 的评论"><div class="thumb"><img src="http://qzapp.qlogo.cn/qzapp/101148295/4CD48384DB8FC9587619DB700C88FEC0/100" class="avatar"alt="秦宇"" width="50" height="50" /></div><p><strong>秦宇</strong><span>请问这个里面的代码怎么下载？</span></p></a></li>	</ul>-->
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>
<footer id="footer">
<#include "/blocks/footer.ftl"/>
</footer>
<div id="suspend">
    <a id="backtop"><i class="fa fa-angle-up"></i></a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src='${request.contextPath!}/js/functions.min.js></script>
</html>